<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="涉农主体详情"></u-navbar> -->
		<view class="fixed-top bg-white">
			<view class="dfes pl-3 pr-3 mt-2">
				<view :class="{'text-BD3124':userInfo.abnormal}">{{ userInfo.enterpriseName }}</view>
				<view v-if="userInfo.abnormal" class="ml-2 bg-F5C9C5 text-BD3124 pl-1 pr-1 rounded p">异常</view>
			</view>
			<view class="dfes mt-2 ml-3 mr-3" v-if="userInfo.agricultureLabelArr">
				<view v-for="(item,index) in userInfo.agricultureLabelArr" :key="index"
					class="mr-2 p font-12 rounded  bg-FCE07F">
					<view class="text-FFC251">{{ item }}</view>
				</view>
			</view>

			<view class="pl-2-5 pr-2-5 tab-item" v-for="(item,index) in tabBars" :id="'tab'+index"
				@click="changeTab(index,item.id)" :key="index">
				<view class="font-16 dfex" :class="tabIndex === index ? 'text-8ED0F2 active':''">
					{{item.name}}
				</view>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>

		<view style="margin-top: 115px;">

			<!-- <scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px);" :show-scrollbar="false"> -->
			<view class="" v-if="tabIndex === 0">
				<u-field v-model="userInfo.enterpriseName" :border-bottom="false" label="企业名称：" label-width="150"
					:disabled="true">
				</u-field>
				<u-field v-model="userInfo.phone" :border-bottom="false" label="手机号：" label-width="130" :disabled="true"
					:field-style="placeholderStyle"></u-field>

				<u-field v-model="userInfo.unifiedCreditCode" :border-bottom="false" label="统一信用代码：" label-width="200"
					:disabled="true" :field-style="placeholderStyle"></u-field>

				<u-field v-model="userInfo.registeredCapital" :border-bottom="false" :disabled="true" label-width="150"
					label="注册资本：" :field-style="placeholderStyle"></u-field>

				<u-field v-model="userInfo.type" :border-bottom="false" :disabled="true" label="类型：" label-width="90"
					:field-style="placeholderStyle"></u-field>
				<u-field v-model="userInfo.legalRepresentative" :border-bottom="false" label="法定代表人：" :disabled="true"
					label-width="170" :field-style="placeholderStyle">
				</u-field>
				<u-field v-model="userInfo.foundedTime" :border-bottom="false" label="成立日期：" label-width="140"
					:disabled="true" :field-style="placeholderStyle"></u-field>

				<u-field v-model="userInfo.businessTerm" :border-bottom="false" label="营业期限：" label-width="140"
					:disabled="true" :field-style="placeholderStyle"></u-field>

				<u-field v-model="userInfo.address" :border-bottom="false" :disabled="true" label="主体地址："
					label-width="140" :field-style="placeholderStyle"></u-field>

				<u-field v-model="userInfo.natureBusiness" :border-bottom="false" :disabled="true" label="经营范围："
					label-width="140" :field-style="placeholderStyle"></u-field>
				<u-field v-model="userInfo.createTime" :border-bottom="false" label-width="140" :disabled="true"
					label="注册时间：" :field-style="placeholderStyle"></u-field>

				<view class="icon-hao iconfont pl-3 pr-3 mt-5  bg-F5C9C5 text-BD3124 ml-3 mr-3 py-1 rounded-10 "
					v-if="userInfo.abnormal">
					<text>该品牌企业已被加入黑名单！</text>
				</view>
			</view>
			<view class="" v-if="tabIndex === 1">
				<view v-for="(item, index) in baseInformList" :key="item.id" class="mb-3"
					style="border-bottom: 2px solid #e3e3e3;">
					<u-field v-model="item.baseName" :border-bottom="false" label="基地名称：" :disabled="true"
						label-width="160" style="padding:3px 15px; ">
					</u-field>
					<u-field v-model="item.contacts" :border-bottom="false" label="联系人：" :disabled="true"
						label-width="120" style="padding:3px 15px; "></u-field>

					<u-field v-model="item.phone" :border-bottom="false" label="联系电话：" :disabled="true"
						label-width="140" style="padding:3px 15px; "></u-field>

					<u-field v-model="item.baseAddress" :border-bottom="false" :disabled="true" label="基地位置："
						label-width="140" style="padding:3px 15px;"></u-field>

					<u-field v-model="item.baseArea" :border-bottom="false" :disabled="true" label="基地面积(m²)："
						label-width="200" style="padding:3px 15px;"></u-field>
					<u-field v-model="item.productIntroduce" :border-bottom="false" label="基地产品介绍：" :disabled="true"
						label-width="200" style="padding:3px 15px;">
					</u-field>
					<view class="flex-y pl-3 pb-3">
						<view>基地图片:</view>
						<image style="width: 142px; height: 100px; left:20px;" :src="item.basePhotoFull" mode="">
						</image>
					</view>
				</view>
				<view v-if="baseInformList.length === 0" class="text-center mt-3 mb-3">
					<view class="icon-sousuo1 iconfont text-999999" style="font-size: 55px;"></view>
					<view class="text-999999 font-15">暂时木有内容呀~~</view>
				</view>
			</view>
			<view class="" v-if="tabIndex === 2">
				<view class="px-3 tab-item" v-for="(item,index) in productCategory" :id="'tab'+index"
					@click="changeTabs(index)" :key="index">
					<view class="font-16" :class="tabBarIndex === index ? 'text-8ED0F2 active':''">
						{{item.typeName}}
					</view>
				</view>
				<view style="padding-top: 20rpx;" v-if="Agriculture.length > 0">
					<view style="border-bottom: #e3e3e3 1px solid; margin: 0 40rpx;" v-for="(item,index) in Agriculture"
						:key="index">
						<u-field style="padding: 8px 0px;" v-model="item.productName" :border-bottom="false"
							label="产品名称：" :disabled="true" label-width="160">
						</u-field>
						<u-field style="padding: 8px 0px;" v-model="item.baseName" :border-bottom="false" label="基地名称："
							:disabled="true" label-width="160"></u-field>
					</view>
				</view>
				<view v-if="productCategory.length === 0" class="text-center mt-3 mb-3">
					<view class="icon-sousuo1 iconfont text-999999" style="font-size: 55px;"></view>
					<view class="text-999999 font-15">暂时木有内容呀~~</view>
				</view>
			</view>
			<view v-if="tabIndex === 3">
				<view class="flex-y pl-3 py-2 pr-3" v-for="(item,index) in papersManage" :key="index">
					<view>{{item.papersName}}：</view>
					<image style="width: 142px; height: 100px;" :src="item.papersPhotoUrlFull" mode=""></image>
				</view>
				<view v-if="papersManage.length === 0" class="text-center mt-3 mb-3">
					<view class="icon-sousuo1 iconfont text-999999" style="font-size: 55px;"></view>
					<view class="text-999999 font-15">暂时木有内容呀~~</view>
				</view>
			</view>

			<!-- </scroll-view> -->
		</view>
	</view>
</template>

<script>
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	import freeConfirm from "@/components/free-ui/free-confirm.vue";
	import $H from '@/common/free-lib/request.js';
	import $U from "@/common/free-lib/util.js";

	export default {
		components: {
			ferrButton,
			freeConfirm
		},
		data() {
			return {
				id: undefined,
				mobile: '测试奢侈',
				placeholderStyle: {
					color: '#999'
				},

				labelStyle: {
					paddingLeft: '13px',
					width: '130px'
				},
				form: {
					name: '',
					intro: ''
				},
				tabIndex: 0,
				keyword: '',
				actionStyle: {
					color: '#8ED0F2'
				},
				tabBars: [{
						"id": 1,
						"name": "主体信息"
					},
					{
						"id": 2,
						"name": "基地信息"
					},
					{
						"id": 3,
						"name": "产品信息"
					},
					{
						"id": 4,
						"name": "证件信息"
					},
				],
				tabBarIndex: 0,

				natureBusinessMap: {
					// 经营范围 1科技类 2文化、传媒广告类 3咨询类 4管理类 5商贸类
					"1": "科技类",
					"2": "文化、传媒广告类",
					"3": "咨询类",
					"4": "管理类",
					"5": "商贸类"
				},
				baseInformPageSize: 10,
				baseInformPageNo: 1,
				baseInformList: [],
				userInfo: {

				},
				papersManage: [],
				productCategory: [],
				Agriculture: []

			}


		},

		onReachBottom() {
			switch (this.tabBars[this.tabIndex]?.id) {
				case 2:
					this.baseInformPageNo = this.baseInformPageNo + 1;
					this.getBaseInformList();
					break;
				case 3:
					this.baseInformPageNo = this.baseInformPageNo + 1;
					this.getAgriculture();
					break;
				case 4:
					this.baseInformPageNo = this.baseInformPageNo + 1;
					this.getPapersManageList();
					break;
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getUserInfo();
		},

		methods: {
			changeTab(index, id) {
				console.log(id);
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				switch (id) {
					case 1:
						this.getUserInfo();
						break;
					case 2:
						this.baseInformPageNo = 1;
						this.baseInformList = [];
						this.getBaseInformList();
						break;
					case 3:
						this.Agriculture = []
						this.getProductCategory();
						break;
					case 4:
						this.papersManage = [];
						this.getPapersManageList();
						break;
				}
			},

			changeTabs(index) {
				if (this.tabBarIndex === index) return;
				this.tabBarIndex = index;
				const selectedProductTypeId = this.productCategory[index].id; // 获取选中的产品分类的 id
				this.getAgriculture(selectedProductTypeId);
				this.baseInformPageNo = 1;
				this.Agriculture = []
			},
			getUserInfo() {
				uni.showLoading({
					title: '加载中'
				});

				$H.get(
					"/agriculture/seasonalProducts/visitor/queryById", {
						id: this.id,
					}, {}
				).then((res) => {
					if (!res.success) {
						uni.showToast({
							title: res.message || '未申请查看主体',
							icon: "none",
						});
						return;
					}
					this.userInfo = res.result;
					this.userInfo.fullAvatar = $H.getFullImageUrl(res.result.businessLicense);
					this.userInfo.natureBusinessText = this.natureBusinessMap[res.result.natureBusiness];
					if (this.userInfo.agricultureLabel) {
						this.userInfo.agricultureLabelArr = this.userInfo.agricultureLabel.split(',');
					}
					uni.hideLoading();
				}).catch(error => {
					console.error('请求出错', error); // 处理任何错误
					uni.showToast({
						title: "查询错误",
						icon: "none",
					});
					uni.hideLoading();
				})
			},
			getBaseInformList() {
				uni.showLoading({
					title: '加载中'
				})
				$H.get('/agriculture/baseInform/upper/follow/list', {
						pageNo: this.baseInformPageNo,
						pageSize: this.baseInformPageSize,
						id: this.id
					}, {})
					.then((res) => {
						uni.hideLoading()
						if (res.result.records.length == 0) {
							uni.showToast({
								title: "没有更多啦！",
								icon: "success",
							});
							return;
						}
						res.result.records.forEach(item => {
							item.basePhotoFull = $H.getFullImageUrl(item.basePhoto);
						})
						this.baseInformList.push(...res.result.records);
					})
					.catch((error) => {
						uni.hideLoading()
						console.error("请求出错", error); // 处理任何错误
					});
			},
			getPapersManageList() {
				uni.showLoading({
					title: '加载中'
				})
				$H.get('/basisInform/papersManage/upper/follow/list?id=' + this.id, {
						pageNo: this.baseInformPageNo,
						pageSize: this.baseInformPageSize,
					}, {})
					.then((res) => {
						uni.hideLoading()
						if (!res.result) {
							uni.showToast({
								title: "无数据",
								icon: "success",
							});
							return;
						}

						res.result.forEach(item => {
							item.papersPhotoUrlFull = $H.getFullImageUrl(item.papersPhotoUrl);
						})
						this.papersManage = res.result;
					})
					.catch((error) => {
						uni.hideLoading()
						console.error("请求出错", error); // 处理任何错误
					});
			},


			//获取产品分类
			getProductCategory() {
				uni.showLoading({
					title: '加载中'
				})
				$H.get('/basisInform/productType/upper/queryAgricultureProductTypeList?id=' + this.id, {}, {})
					.then((res) => {
						uni.hideLoading()
						if (res.result.length == 0) {
							uni.showToast({
								title: "没有更多啦！",
								icon: "success",
							});
							return;
						}
						this.productCategory = res.result;
						this.productTypeId = this.productCategory[0].id;
						this.getAgriculture(this.productTypeId);
					})
					.catch((error) => {
						uni.hideLoading()
						console.error("请求出错", error); // 处理任何错误
					});
			},

			// 产品列表 
			getAgriculture(productTypeId) {
				uni.showLoading({
					title: '加载中'
				})
				$H.get('/agriculture/productInform/upper/follow/list?id=' + this.id, {
						productTypeId: productTypeId,
						pageNo: this.baseInformPageNo,
						pageSize: this.baseInformPageSize,
					}, {})
					.then((res) => {
						uni.hideLoading()
						if (res.result.records.length == 0) {
							uni.showToast({
								title: "没有更多啦！",
								icon: "success",
							});
							return;
						}
						this.Agriculture.push(...res.result.records);
					})
					.catch((error) => {
						uni.hideLoading()
						console.error("请求出错", error); // 处理任何错误
					});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.tab-scroll {
		width: 100vw;
	}


	.tab-item {
		// margin-left: 2px;
		display: inline-block;
		text-align: center;
		// padding: 0 13px;
		line-height: 40px;

	}

	.active {
		border-bottom: 2px solid #8ED0F2;
	}
</style>